<template>
  <div>
    <div style="position: fixed;height: 0.65rem;width: 100%;background-color: rgb(0,0,0,0.5)" >
    <div style="position: absolute;left: 0.2rem;top: -0.6rem" @click="$router.go(-1)">
      <svg class="icon" aria-hidden="true" style="font-size: 0.5rem;color: #e7efd8">
        <use xlink:href="#icon-zuojiantou"></use>
      </svg>
    </div>
    <div style="position: absolute;left: 6.5rem;top: -0.6rem">
      <svg class="icon" aria-hidden="true" style="font-size: 0.4rem;color: #e7efd8">
        <use xlink:href="#icon-sangedian"></use>
      </svg>
    </div>
    </div>
    <img :src="Cover.imgUrl[2].al.picUrl" alt="" style="height: 4rem;width: 100%" v-if="Cover.imgUrl">
  </div>
</template>
<script>
import {onMounted, reactive, watch} from "vue";
export default {
  props:['GoodList'],
  name: "GoodsHeader",
  setup(props){
    let Cover=reactive({
      imgUrl:''
    })
   watch(props.GoodList,()=>{
     Cover.imgUrl=props.GoodList.Songslist
     // console.log(Cover.imgUrl)
   })
  return{
      Cover
  }

  }
}
</script>

<style scoped>

</style>